const seriesRegExp = /^cq\-tabs\-\-s\d+n\d+$/;

class TabsClass {
	el = null; // 元素
	series = []; // 组件系列名
	constructor(params) {}
}

const clearClass = function (els, classname, callback) {
	if (els && els.length > 0 && classname) {
		for (let i = 0; i < els.length; i++) {
			els[i].classList.remove(classname);
		}
		callback && callback();
	}
};

const Tbas = {
	setup: false, // 是否已开启默认设置
	create(params) {
		return new TabsClass(params);
	},
	setupDefault() {
		this.setup = true;
		const tabsList = document.querySelectorAll('.cq-tabs');

		tabsList.forEach((el) => {
			const tabs = el;
			const tabsBtns = tabs.querySelectorAll('.cq-tabs--item');
			const tabsPanels = tabs.querySelectorAll('.cq-tabs--panel');
			tabsBtns.forEach((btnEl, index) => {
				// 判断对应索引的panel是否存在
				if (tabsPanels[index]) {
					btnEl.addEventListener('click', function (e) {
						clearClass(tabsBtns, 'is-active', () => {
							this.classList.add('is-active');
						});
						clearClass(tabsPanels, 'is-active', () => {
							tabsPanels[index].classList.add('is-active');
						});
					});
				} else {
					console.warn(`未找到找到tabs索引为 ${index} 的panel`);
				}
			});
		});
	},
};

export default Tbas;
